<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
    <title>form-validate</title>
    <link rel="stylesheet" href="../scripts/lib/seedsui/seedsui.min.css">
</head>

<body ontouchstart="">
    <header>
        <div class="titlebar">
            <a class="titlebar-button" href="javascript:back()"><i class="icon icon-arrowleft"></i></a>
            <h1 class="titlebar-title">表单验证</h1>
        </div>
    </header>
    <article>
    	<form id="ID-Form" method="post">
            <div class="group" style="padding:0 12px;">
                <div class="inputbox underline">
                    <label class="inputbox-left">用户</label>
                    <div class="inputbox-right inputbox" data-input="clear">
                        <input type="text" class="input-text" name="NID-UserName" maxlength="16"/>
                        <i class="icon icon-clear-fill color-placeholder hide"></i>
                    </div>
                </div>
                <div class="inputbox">
                    <label class="inputbox-left">密码</label>
                    <div class="inputbox-right inputbox" data-input="reveal">
                        <input type="password" class="input-text" name="NID-Pwd" maxlength="16"/>
                        <i class="icon icon-eye-fill color-placeholder"></i>
                    </div>
                    <ul class="safelvl lvl0">
                        <li>
                            <div class="safelvl-progress"></div>
                            <span class="safelvl-font">弱</span>
                        </li>
                        <li>
                            <div class="safelvl-progress"></div>
                            <span class="safelvl-font">中</span>
                        </li>
                        <li>
                            <div class="safelvl-progress"></div>
                            <span class="safelvl-font">强</span>
                        </li>
                    </ul>
                </div>
                
                <div style="height:40px;"></div>
                <hr/>

                <div class="inputbox underline">
                    <label class="inputbox-left">确认</label>
                    <div class="inputbox-right inputbox" data-input="reveal">
                        <input type="password" name="NID-RePwd" class="input-text"/>
                        <i class="icon icon-eye-fill color-placeholder"></i>
                    </div>
                </div>

                <div class="inputbox underline">
                    <label class="inputbox-left">手机</label>
                    <div class="inputbox-right inputbox">
                        <input type="text" name="NID-Phone" class="input-text"/>
                    </div>
                </div>

                <div class="inputbox underline">
                    <label class="inputbox-left">姓名</label>
                    <div class="inputbox-right inputbox">
                        <input type="text" name="NID-Name" class="input-text"/>
                    </div>
                </div>

                <div class="inputbox underline">
                    <label class="inputbox-left">性别</label>
                    <div class="inputbox-right inputbox">
                        <select class="input-text" name="NID-Sex">
                            <option value="male">男</option>
                            <option value="female">女 </option>
                        </select>
                    </div>
                </div>

                <div class="inputbox underline">
                    <label class="inputbox-left">邮箱</label>
                    <div class="inputbox-right inputbox">
                        <input type="text" name="NID-Mail" class="input-text"/>
                    </div>
                </div>

                <div class="inputbox">
                    <label class="inputbox-left">年龄</label>
                    <div class="inputbox-right inputbox">
                        <input type="number" name="NID-Age" class="input-text"/>
                    </div>
                </div>
            </div>
            <div style="margin:0 12px;">
                <input type="submit" class="button submit block" style="width: 100%;" value="注册"/>
            </div>
    	</form>
    </article>
    
    <script src="../scripts/lib/seedsui/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <!--<script src="../scripts/lib/exmobi/exmobi.js"></script>-->
    <script>
        var view={
            /*=========================
              Model
              ===========================*/
            render:function(){
                var self = this;
                this.validator={};
                //渲染页面
                this.formContainer=document.getElementById("ID-Form");

                this.toast=new Toast();
                this.formControls=new FormControls();;
                //加载数据
                this.loadData();
            },
            refresh:function(){
                console.log("刷新");
            },
            destroy:function(){
                console.log("移除");
            },
            loadData:function(){

                this._attach();//使用backbone时，此行无用
            },
            /*=========================
              Method
              ===========================*/
            _validateForm:function(){
                var validator=new Validator();
                validator.add(this.formContainer["NID-UserName"],[
                    {
                        rule:'required',
                        errorMsg:'用户名不能为空'
                    },{
                        rule:'minLength:6',
                        errorMsg:'用户名不能低于6位'
                    },{
                        rule:'username',
                        errorMsg:'用户名必须为字母数字或者下划线'
                    }
                ]);
                validator.add(this.formContainer["NID-Pwd"],[
                    {
                        rule:'required',
                        errorMsg:'密码不能为空'
                    },{
                        rule:'minLength:6',
                        errorMsg:'密码不能低于6位'
                    },{
                        rule:'maxLength:16',
                        errorMsg:'密码不能超过16位'
                    },{
                        rule:'password',
                        errorMsg:'密码格式不正确'
                    },{
                        rule:'safeLvl:3',
                        errorMsg:'密码强度不够'
                    }
                ]);
                validator.add(this.formContainer["NID-RePwd"],[
                    {
                        rule:'required',
                        errorMsg:'密码不能为空'
                    },{
                        rule:'minLength:6',
                        errorMsg:'密码不能低于6位'
                    },{
                        rule:'maxLength:16',
                        errorMsg:'密码不能超过16位'
                    },{
                        rule:'password',
                        errorMsg:'密码格式不正确'
                    },{
                        rule:'compare:'+this.formContainer["NID-Pwd"].value,
                        errorMsg:'两次密码输入不一致'
                    }
                ]);
                validator.add(this.formContainer["NID-Phone"],[
                    {
                        rule:'phone',
                        errorMsg:'手机号码不正确'
                    }
                ]);
                validator.add(this.formContainer["NID-Name"],[
                    {
                        rule:'chinese',
                        errorMsg:'姓名请输入中文'
                    }
                ]);
                validator.add(this.formContainer["NID-Mail"],[
                    {
                        rule:'mail',
                        errorMsg:'邮箱格式不正确'
                    }
                ]);
                validator.add(this.formContainer["NID-Age"],[
                    {
                        rule:'negativeInteger',
                        errorMsg:'年龄只能为正整数'
                    },{
                        rule:'minNumber:1',
                        errorMsg:'年龄最小1岁'
                    },{
                        rule:'maxNumber:48',
                        errorMsg:'年龄最大48岁'
                    }
                ]);
                var error=validator.start();
                return error;
            },
            _update:function(){
            },
            /*=========================
              Plugin
              ===========================*/
            /*=========================
              Events
              ===========================*/
            _attach:function(e){
                var self=this;
                this.formContainer.addEventListener("submit",function(e){
                    self._onSubmit(e);
                },false);
            },
            _showError:function(form,msg){
                var self=this;
                form.fields.forEach(function(n){
                    n.blur();
                });
                setTimeout(function(){
                    self.toast.setText(msg);
                    self.toast.show();
                }, 200);
            },
            /*=========================
              Event Handler
              ===========================*/
            _onSubmit:function(e){
                e.preventDefault();
                //获取表单
                this.form=new Form(this.formContainer);

                //重置错误样式
                for(var i=0,el;el=this.form.fields[i++];){
                    el.parentNode.parentNode.classList.remove("inputbox-error");
                }
                
                //表单验证
                var error=view._validateForm();
                if(error){
                    this._showError(this.form,error.msg);
                    error.field.parentNode.parentNode.classList.add("inputbox-error");
                    return;
                }
                var formArr=this.form.serializeJson();
                console.log(formArr);
            }
        }

        window.addEventListener("load",function(){
            view.render();
        }, false);
        //定义exmobi返回
        function back(){history.go(-1);}
    </script>
</body>
</html>